<template>
  <div class="StaffManage">
    <h4>员工管理</h4>
    <div class="key-search clear">
      <el-button
        class="float-right"
        type="primary"
        @click="
          $router.push({
            name: 'AddStaff',
            query:{
              p: $ed({
                state: 'add',
              })}
          })"
      >新增员工</el-button>
      <el-button
        class="float-right"
        icon="el-icon-search"
        @click="handelSearch"
      >搜索</el-button>
      <el-input
        v-model="keySearch"
        class="float-right"
        placeholder="请输入用户名或手机号码"
      />
    </div>
    <div style="clear:both" />
    <div class="data-table">
      <el-table
        v-loading="loading"
        :data="Bindata"
        :header-cell-style="headerStyle"
        stripe
        height="500"
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="phone" label="联系方式" align="center" />
        <el-table-column prop="storeName" label="门店" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>
              {{ scope.row.storeInfo.map(inf => inf.storeName).toString() }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="角色" align="center">
          <template slot-scope="scope">
            <span
              v-if="scope.row.roles.includes('0')"
            >配货员{{ scope.row.roles.includes('1') ? '、' : '' }}</span>
            <span
              v-if="scope.row.roles.includes('1')"
            >配送员{{ scope.row.roles.includes('2') ? '、' : '' }}</span>
            <span v-if="scope.row.roles.includes('2')">维护</span>
          </template>
        </el-table-column>
        <el-table-column prop="hasSystem" label="类型" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.hasSystem == '1'">有运维后台</span>
            <span v-else-if="scope.row.hasSystem == '0'">无运维后台</span>
          </template>
        </el-table-column>
        <el-table-column prop="icCard" label="IC卡" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.icCard">{{ scope.row.icCard }}</span>
            <span v-else style="color:blue">————</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          header-align="right"
          align="right"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handelShowDetils(scope.row)"
            >查看详情</el-button>
            <el-button
              type="text"
              @click="
                $router.push({
                  name: 'EditStaff',
                  query:{
                    p: $ed({
                      state: 'edit', row: scope.row
                    })}
                })
              "
            >编辑</el-button>
            <el-button
              type="text"
              style="color:red"
              @click="handelRemove(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        class="float-right"
        :current-page="pages.pageIndex"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pages.pageSzie"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <el-dialog :visible.sync="visible_1" center title="删除提示" width="400px">
      <p>
        该员工为门店管理员，请在门店详情--编辑门店中更换门店管理员后再删除。
      </p>
      <div slot="footer">
        <el-button type="primary" @click="visible_1 = false">关闭</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import { StaffMangeList, StaffMangeDel } from '@/api/customAPI/shop/staffManage'
export default {
  name: 'StaffManage',
  data() {
    return {
      Bindata: [],
      visible_1: false,
      loading: false,
      keySearch: '',
      pages: {
        pageIndex: 1,
        pageSzie: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.loadding()
  },
  activated() {
    this.loadding()
  },
  methods: {
    handelShowDetils(row) {
      this.$router.push({
        name: 'StaffDetail'
      })
      sessionStorage.setItem('StaffDetail', JSON.stringify(row))
    },
    /** 搜索 */
    handelSearch() {
      this.loadding()
    },
    /** 删除 */
    handelRemove(row) {
      this.rowsRemove(row)
    },
    rowsRemove(row) {
      this.$confirm('删除确认', '提示', {
        cancelButtonText: '取消',
        confirmButtonText: '确认',
        type: 'warning'
      })
        .then(result => {
          StaffMangeDel({ staffId: row.id })
            .then(result => {
              this.$message.success('成功')
              this.loadding()
            })
            .catch(err => {
              if (
                err.errno.tostring() === '-1' ||
                err.errno.tostring() === '500'
              ) {
                this.$alert(err.errmsg, '提示', {
                  type: 'warning'
                })
              }
            })
        })
        .catch(() => {})
    },
    loadding() {
      this.loading = true
      StaffMangeList({
        keySearch: this.keySearch || '',
        page: this.pages.pageIndex,
        limit: this.pages.pageSzie,
        storeId: ''
      }).then(inf => {
        console.log(inf.data.data)
        this.Bindata = inf.data.data.list
        this.pages.total = inf.data.data.total
        this.loading = false
      })
    },
    headerStyle({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background:#f3f3f3'
      } else {
        return ''
      }
    },
    handleCurrentChange(index) {
      this.pages.pageIndex = index
      this.loadding()
    },
    handleSizeChange(size) {
      this.pages.pageSzie = size
      this.loadding()
    }
  }
}
</script>

<style lang="scss" scoped>
.StaffManage {
  .clear::after {
    clear: both;
  }
  .float-right {
    float: right;
  }
  padding: 50px 100px;
  .key-search {
    .el-button {
      width: 120px;
      margin-left: 20px;
    }
    .el-input {
      width: 200px;
    }
  }
  .pagination,
  .data-table {
    margin-top: 50px;
  }
}
</style>
